<template>
  <div class="xilashuy">
    <el-dialog
      title="添加产品"
      :visible.sync="dialogTableVisible"
      :close-on-click-modal="false"
      :before-close="close"
      width="900px">
      <el-form :model="selectForm" ref="queryForm" :inline="true">
        <el-form-item label="设备编号" >
          <el-input
            v-model="selectForm.code"
            placeholder="请输入设备编号"
            clearable
          />
        </el-form-item>
        <el-form-item label="设备名称" >
          <el-input
            v-model="selectForm.deviceName"
            placeholder="请输入设备名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="设备状态" >
          <el-select v-model="selectForm.statusId" placeholder="请选择">
            <el-option
              v-for="item in statusIdlist"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属部门" >
          <treeselect v-model="selectForm.deptId" :options="deptOptions" placeholder="请选择所属部门" />
        </el-form-item>
        <el-form-item label="验收类别" >
          <el-select v-model="selectForm.typeName" placeholder="请选择">
            <el-option
              v-for="item in typeNamelist"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="验收单号"  >
          <el-select v-model="selectForm.acceptId" placeholder="请选择">
            <el-option
              v-for="item in acceptIdlist"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" :data="chanpinList"
                stripe
                @cell-click="cellClick"
                highlight-current-row>
        <el-table-column align="center" type="index" label="序号"  width="55"  />
        <el-table-column align="center" label="设备编号" property="code" width="150" ></el-table-column>
        <el-table-column align="center" label="设备名称"   property="deviceName" :show-overflow-tooltip="true"  ></el-table-column>
        <el-table-column align="center" label="设备品牌" property="brand" :show-overflow-tooltip="true" width="150" ></el-table-column>
        <el-table-column align="center" label="设备型号"  property="model"  ></el-table-column>
        <el-table-column align="center" label="状态"  property="statusId" ></el-table-column>
        <el-table-column align="center" label="所属部门"  property="deparementId" ></el-table-column>
        <el-table-column align="center" label="下步验收"  property="typeName" ></el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="1"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        style="margin-top: 15px"
        :total="40">
      </el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary"  size="mini" @click="determine">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { treeselect } from "@/api/system/dept";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  export default {
    props: ['qzsdData'],
    name: "Role",
    data() {
      return {
        mineStatus: "",
        deptOptions: undefined,
        loading:false,
        dialogTableVisible:true,
        //产品查询数据
        selectForm:{
          code:'',
          deviceName:'',
          statusId:'',
          deparementId:'',
          typeName:'',
          acceptId:'',
          deptId:undefined,//下拉树

        },
        //列表数据
        chanpinList:[
          {code:'HC2018121300111',deviceName:'运输车',statusId:'辆',deparementId:'111111',typeName:'22222',acceptId:'5555',brand:'33',model:'66'},
        ],
        newxuanz:'',//当前选中的
        //验收单
        acceptIdlist:[
          {value:'1',label:'验收111'},
          {value:'2',label:'验收22'},
        ],
        //验收类别
        typeNamelist:[
          {value:'1',label:'到货验收'},
          {value:'2',label:'开箱验收'},
          {value:'3',label:'试运行验收'},
          {value:'4',label:'段确验收'},
        ],
        //设备状态
        statusIdlist:[
          {value:'1',label:'停用'},
          {value:'2',label:'保养'},
          {value:'3',label:'报废'},
          {value:'4',label:'闲置'},
          {value:'5',label:'在用'},
          {value:'6',label:'待验收'},
          {value:'7',label:'预转固'},
          {value:'8',label:'故障'},
          {value:'9',label:'正常'},
        ],


      };
    },
    components:{
      Treeselect,
    },
    watch: {
      dialogTableVisible: function () {
        this.dialogTableVisible = true;//始终让他为true;
        this.cancel();//隐藏
      },
    },
    created() {
      console.log('前置验收单',this.qzsdData)
      this.getTreeselect()
    },
    methods: {

      /** 查询部门下拉树结构 */
      getTreeselect() {
        treeselect().then(response => {
          this.deptOptions = response.data;
        });
      },


      //行点击事件
      cellClick:function(row,column,event,cell){
        console.log('row',row)
        this.newxuanz = row
      },
      //确定
      determine:function(){
        console.log('确定')

        this.$emit('qzysdBack',this.newxuanz)//将submitModel的值传给父组件
      },
      //隐藏
      cancel:function(){
        this.determine()
      },
      //分页
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },


    }
  };
</script >
<style >
 .el-input--medium .el-input__inner {
    border: 1px solid #cccccc;
  }
 .xilashuy .el-form-item--medium .el-form-item__content {
   width: 200px;
 }



</style>
